﻿@{
    ViewBag.Title = "User Role";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="userRoleContainer">
    <div class="first">
        <div class="second" style="width: 1019px;">
            <table id="marbleTable" class="table marbleTable userRoleTbl">
                <thead class="thead-dark">
                    <th hidden>ID</th>
                    <th>Role</th>
                    <th>Description</th>
                    <th>Manager Flag</th>
                    <th>AllowPOSAccess</th>
                    <th>POS ClockInOut</th>
                    <th>AllowShift OpenClose</th>
                    <th>Last Updated By</th>
                    <th>Last Updated Date</th>
                </thead>
                @foreach (var item in ViewBag.userRoles)
                {
                    <tr onchange="UpdatedList(this)" tabindex ="@item.Id">
                        <td onclick="UpdateTree(this)" hidden>
                            @item.Id
                        </td>
                        <td onclick="UpdateTree(this)">
                            <input type="text" value="@item.Role" class="gridText"/>
                        </td>
                        <td onclick="UpdateTree(this)">
                            <input type="text" value="@item.Description" class="gridText" />
                        </td>
                        <td onclick="UpdateTree(this)">
                            <input type="checkbox"  @(item.ManagerFlag ? "checked='checked'" : "") value="@item.ManagerFlag" />
                        </td>
                        <td onclick="UpdateTree(this)">
                            <input type="checkbox" @(item.AllowPOSAccess ? "checked='checked'" : "") value="@item.AllowPOSAccess" />
                        </td>
                        <td onclick="UpdateTree(this)">
                            <input type="checkbox" @(item.POSClockInOut ? "checked='checked'" : "") value="@item.POSClockInOut" />
                        </td>
                        <td onclick="UpdateTree(this)">
                            <input type="checkbox" @(item.AllowShiftOpenClose ? "checked='checked'" : "") value="@item.AllowShiftOpenClose" />
                        </td>
                        <td onclick="UpdateTree(this)">
                            <input type="text" value="@item.LastUpdatedBy" class="gridText" disabled />
                        </td>
                        <td onclick="UpdateTree(this)">
                            <input type="text" value="@item.LastUpdatedDate" class="gridText" disabled />
                        </td>
                    </tr>
                }
            </table>
        </div>
    </div>
    <div class="userModuleAccess">
        <link href="~/Content/css/kendo.common.min.css" rel="stylesheet" />
        <link href="~/Content/css/kendo.default.css" rel="stylesheet" />
        <script src="~/Content/JS/kendo.all.min.js"></script>
        <div class="demo-section k-content">
            <div>
                <span class="actionTreeHeader">Module Action Tree</span>
            </div>
            <div id="parent">
                <div id="treeview"></div>
            </div>
            <div id="result"></div>
        </div>
    </div>
    <div class="action">
        <button class="btn btn-primary btn-md" role="button" onclick="SaveUserRoles()">Save</button>
        <a href="#" class="btn btn-primary btn-md" role="button" onclick="AddUserRole()">Add UserRole</a>
    </div>

</div>
<script>
    var selectedTreeItems = '';
    var selectedRow = 0;
    function AddUserRole() {
        var newRow = '<tr onchange = UpdatedList(this)>' +
        '<td> <a href="#"></a> </td>' +
        '<td> <input type="text" value="" class="gridText"/>  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="checkbox" />  </td>' +
        '<td> <input type="checkbox" />  </td>' +
        '<td> <input type="checkbox" />  </td>' +
        '<td> <input type="checkbox" />  </td>' +
        '<td> <input type="text" value="" class="gridText" disabled/>  </td>' +
        '<td> <input type="text" value="" class="gridText" disabled/>  </td>' + '</tr>';
        $('#marbleTable tr:last').after(newRow);
    }

    var updatedArray = [];
    function UpdatedList(row) {
        if (!updatedArray.includes(row.rowIndex)) {
            updatedArray.push(row.rowIndex);
        }
    }

    function SaveUserRoles() {
        var userRoles = [];
        var table = document.getElementById('marbleTable');
        for (var r = 1, n = table.rows.length; r < n; r++) {
            var moduleActions = '';
            if (r == selectedRow) {
                moduleActions = selectedTreeItems;
            }
            if (updatedArray.includes(r)) {
                userRoles.push({
                    Id: table.rows[r].cells[0].innerHTML,
                    Role: table.rows[r].cells[1].children[0].value,
                    Description: table.rows[r].cells[2].children[0].value,
                    ManagerFlag: table.rows[r].cells[3].children[0].checked,
                    AllowPOSAccess: table.rows[r].cells[4].children[0].checked,
                    POSClockInOut: table.rows[r].cells[5].children[0].checked,
                    AllowShiftOpenClose: table.rows[r].cells[6].children[0].checked,
                    AavalibleModuleActions: selectedTreeItems
                });
            }
        }
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("UpdateUserRoles", "SiteSetup")',
            data: JSON.stringify({ userRoles: userRoles }),
            dataType: "json",
            success: function (data) {
                alert('Data Saved');
                location.reload();
            },
            error: function (e) {
                alert(e);
            }
        });
    }

    function UpdateTree(x) {
        var tbl = document.getElementById('marbleTable');
        selectedRow = tbl.rows[x.parentNode.rowIndex].cells[0].innerHTML;
        UpdateModuleActionTree(selectedRow.trim());
    }

    function UpdateModuleActionTree(roleId) {
        $("#treeview").remove();
        moduleActions = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: "/sitesetup/ModuleActionPermission?roleId=" + roleId,
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    id: "value",
                    children: "items"
                }
            }
        });

        $("<div id=\"treeview\" />").appendTo("#parent").kendoTreeView({
            dataSource: moduleActions,
            dataTextField: ["name"],
            checkboxes: {
                checkChildren: true
            },
            check: onCheck,
            dataBound: function (e) {
                var treeView = $('#treeview').data('kendoTreeView');
                treeView.expand(".k-item"); // in order to highlight the check boxes we need to expand and collpse
                treeView.collapse(".k-item");
            }
        });
    }
    function checkedNodeIds(nodes, checkedNodes) {
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].checked) {
                checkedNodes.push(nodes[i].id);
            }

            if (nodes[i].hasChildren) {
                checkedNodeIds(nodes[i].children.view(), checkedNodes);
            }
        }
    }
    // show checked node IDs on datasource change  
    function onCheck() {
        var checkedNodes = [],
            treeView = $("#treeview").data("kendoTreeView"),
            message;

        checkedNodeIds(treeView.dataSource.view(), checkedNodes);

        if (checkedNodes.length > 0) {
            message = checkedNodes.join(",");
            selectedTreeItems = message;
        } else {
            message = '';
        }

        $("#result").html(message);
    }
</script>
